<template>
    <el-card>
        <el-row slot="header" type="flex" class="row-bg" justify="space-between">
            <span>菜单管理</span>
        </el-row>
        <el-alert title="Tips" type="warning" description="设置后台管理系统的左侧菜单，目前至多支持两层菜单，三层以上菜单将不会显示。" show-icon
            :closable="false">
        </el-alert>
        <el-table :data="tableData" default-expand-all row-key="permission_id" style="width: 100%">
            <el-table-column fixed label="资源名称" width="200">
                <template slot-scope="scope">
                    {{ scope.row.resource_type_name === '操作' ? scope.row.permission_remark : scope.row.menu_name }}
                </template>
            </el-table-column>
            <el-table-column prop="icon_menu.icon_id" label="图标" width="180">
                <template slot-scope="scope">
                    <i :class="`el-icon-${scope.row.icon_name}`"></i>
                </template>
                
            </el-table-column>
            <el-table-column label="资源类型" width="180">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.resource_type_name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="resource_type_code" label="资源代码" width="180">
            </el-table-column>
            <el-table-column prop="permission_code" label="资源权限" width="180">
            </el-table-column>
            <el-table-column prop="operation_name" label="操作名称" width="180">
            </el-table-column>
            <el-table-column prop="menu_name" label="菜单名称" width="180">
            </el-table-column>
            <el-table-column prop="menu_full_path" label="完整菜单地址" width="180">
            </el-table-column>
            <el-table-column prop="menu_order" label="菜单序号" width="180">
            </el-table-column>
            <el-table-column prop="permission_remark" label="备注" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template slot-scope="scope">
                    <el-button v-permission="'system:menu:edit'" @click="openEditDialog(scope.row)" icon="el-icon-edit" plain></el-button>
                    <el-button v-permission="'system:menu:create'" v-if="scope.row.resource_type_name !== '操作'" @click="openInsertDialog(scope.row)"
                        icon="el-icon-circle-plus-outline" plain></el-button>
                    <el-button v-permission="'system:menu:setting'" v-if="scope.row.resource_type_name !== '操作'" icon="el-icon-star-off"
                        @click="openIconDialog(scope.row)" plain></el-button>
                    <el-button v-permission="'system:menu:remove'" @click="handleRemove(scope.row)" type="danger" icon="el-icon-delete" plain></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加菜单/操作按钮" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
            <el-tabs v-model="activeName">
                <el-tab-pane name="menu" label="添加菜单">
                    <el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
                        <el-form-item label="菜单名称" prop="menu_name">
                            <el-input type="text" v-model="insert_form.menu_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="关联路由" prop="route_id">
                            <el-cascader :options="route_1st" v-model="insert_form.route_id"
                                :props="{ label: 'route_name', value: 'route_id', checkStrictly: true,emitPath: false, }"
                                clearable></el-cascader>
                        </el-form-item>
                        <el-form-item label="顺序" prop="menu_order">
                            <el-input type="text" v-model="insert_form.menu_order" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="权限代码" prop="permission_code">
                            <el-input type="text" v-model="insert_form.permission_code" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="权限备注" prop="permission_remark">
                            <el-input type="text" v-model="insert_form.permission_remark" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane name="oper" label="添加按钮">
                    <el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
                        <el-form-item label="操作类型" prop="operation_id">
                            <el-select v-model="insert_form.operation_id" placeholder="请选择" prop="operation_name">
                                <el-option v-for="item in opers" :key="item.operation_id" :label="item.operation_name"
                                    :value="item.operation_id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="权限代码" prop="permission_code">
                            <el-input type="text" v-model="insert_form.permission_code" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="权限备注" prop="permission_remark">
                            <el-input type="text" v-model="insert_form.permission_remark" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="insert_dialog_visible = false">取 消</el-button>
                <el-button type="primary" @click="handleInsert">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改菜单/操作按钮" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
            <el-tabs v-model="activeName">
                <el-tab-pane name="menu" :disabled="this.current_menu.resource_type_name === '操作'" label="添加菜单">
                    <el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
                        <el-form-item label="菜单名称" prop="menu_name">
                            <el-input type="text" v-model="edit_form.menu_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="关联路由" prop="route_id">
                            <el-cascader :options="route_1st" v-model="edit_form.route_id"
                                :props="{ checkStrictly: true, label: 'route_name', value: 'route_id', emitPath: false, }"
                                clearable></el-cascader>
                        </el-form-item>
                        <el-form-item label="顺序" prop="menu_order">
                            <el-input type="text" v-model="edit_form.menu_order" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="权限代码" prop="permission_code">
                            <el-input type="text" v-model="edit_form.permission_code" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="权限备注" prop="role_description">
                            <el-input type="text" v-model="edit_form.role_description" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane name="oper" :disabled="this.current_menu.resource_type_name === '菜单'" label="添加按钮">
                    <el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
                        <el-form-item label="操作类型">
                            <el-select v-model="edit_form.operation_id" placeholder="请选择">
                                <el-option v-for="item in opers" :key="item.operation_id" :label="item.operation_name"
                                    :value="item.operation_id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="权限代码" prop="permission_code">
                            <el-input type="text" v-model="edit_form.permission_code" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="权限备注" prop="role_description">
                            <el-input type="text" v-model="edit_form.role_description" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edit_dialog_visible = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog title="图标" :visible.sync="icon_dialog_visible">
            <div class="block ">
                <div class="icon_serot">
                    <div v-for="(item,index) in icon_menu" class="icon_border" :class="{active:current===index}"
                        @click="handleIcon(item.icon_id,item.icon_name,index)">
                        <i :class="`el-icon-${item.icon_name}`" class="icon" :key="item.icon_id"></i>
                        <div class="icon_name">{{ item.icon_name }}</div>
                    </div>
                </div>

                <el-pagination @current-change="handlePageChange" :current-page.sync="index_page" class="page"
                    layout="prev, pager, next" :total="100">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="icon_dialog_visible = false">取 消</el-button>
                <el-button type="primary" @click="handleIconChange">保 存</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
    data() {
        return {
            tableData: [],
            index_page: 1,
            isCh: [],
            activeName: 'menu',
            insert_dialog_visible: false,
            insert_form: {
                menu_name: "",
                route_id: "",
                menu_order: "",
                permission_code: "",
                permission_remark: "",
                resource_type_name: '',
                resource_type_code: '',
                operation_id: '',
                operation_name: '',
            },
            edit_dialog_visible: false,
            edit_form: {
                menu_name: "",
                route_id: "",
                menu_order: "",
                permission_code: "",
                permission_remark: "",
                resource_type_name: '',
                resource_type_code: '',
                operation_id: '',
                operation_name: '',
            },
            rules: {
                menu_name: [
                    { required: true, message: "请输入菜单名称！", tigger: 'blur' },
                ],
                route_id: [
                    { type: 'number', required: true, message: "请选择与之关联的路由！", tigger: 'blur' },
                ],
                menu_order: [
                    { required: true, message: "请填写显示顺序！", tigger: 'blur' },
                ],
                permission_code: [
                    { required: true, message: "请输入权限代码！", tigger: 'blur' },
                ],
                role_description: [
                    { required: true, message: "请输入权限备注！", tigger: 'blur' },
                ],
            },
            current_menu: {},
            cascader: '',
            route_1st: '',
            icon_dialog_visible: false,
            iconID: {},
            current:'',
        }
    },
    created() {
        this.loadList();
        this.route_1st = this.tree_data[0].children;
    },
    watch: {
        tree_menu(newValue) {
            this.tableData = newValue;
        },
    },
    computed: {
        ...mapState('menu', ['icon_menu']),
        ...mapGetters('route', ['tree_data']),
        ...mapState('operation', ['opers']),
        ...mapGetters('menu', ['tree_menu'])
    },
    methods: {
        ...mapActions('menu', ['load_menu_list', 'edit_menu', 'edit_oper', 'insert_menu', 'insert_oper', 'remove_menu', 'remove_oper', 'load_icon', 'edit_icons']),
        async loadList() {
            let { status, msg, data } = await this.load_menu_list({});
            if (status) {
                this.tableData = this.tree_menu;
            }
        },
        async loadIcon(size, index) {
            let { status, msg, data, total } = await this.load_icon({ pageSize: size, pageIndex: index });
            if (status) {
                this.icons = this.icon_menu;
            }
        },
        openInsertDialog(menu) {
            this.insert_form.parent_id = menu.permission_id;
            this.insert_form.permission_code = menu.permission_code;
            this.insert_dialog_visible = true;
            this.current_menu = { ...menu };
        },
        handleInsert() {
            if (this.activeName === 'menu') {
                this.insert_form.resource_type_name = '菜单'
                this.resource_type_code = 'MENU';
                this.$refs.insert_form.validate(async (valid) => {
                    if (valid) {
                        let { status, msg, data } = await this.insert_menu({ ...this.insert_form });
                        if (status) {
                            this.insert_dialog_visible = false;
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }
                });
            } else {
                this.insert_form.resource_type_name = '操作'
                this.resource_type_code = 'OPERATION';
                this.$refs.insert_form.validate(async (valid) => {
                    if (valid) {
                        let { status, msg, data } = await this.insert_oper({ ...this.insert_form });
                        if (status) {
                            this.insert_dialog_visible = false;
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }
                });
            }
        },
        handleCloseDialog(formName) {
            this.$refs[formName].resetFields();
        },
        openEditDialog(menu) {
            this.current_menu = menu;
            this.edit_form = { ...menu };
            if (menu.resource_type_name === '操作') {
                this.activeName = 'oper';
                this.edit_oper_form = { ...menu };
            } else {
                this.activeName = 'menu';
                this.edit_menu_form = { ...menu };
            };
            this.edit_dialog_visible = true;
        },
        async handleEdit() {
            if (this.activeName === 'menu') {
                let { menu_id } = this.edit_form;
                try {
                    let valid = await this.$refs.edit_form.validate();
                    if (valid) {
                        let payload = [menu_id, { ...this.edit_form }];
                        let { status, msg, data } = await this.edit_menu(payload);
                        if (status) {
                            // 关闭弹窗
                            this.edit_dialog_visible = false;
                            // 信息提示
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }
                } catch (error) {
                    console.log(error);
                }
            } else {
                let { permission_id } = this.edit_form;
                try {
                    let valid = await this.$refs.edit_form.validate();
                    if (valid) {
                        let payload = [permission_id, { ...this.edit_form }];
                        let { status, msg, data } = await this.edit_oper(payload);
                        if (status) {
                            // 关闭弹窗
                            this.edit_dialog_visible = false;
                            // 信息提示
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }
                } catch (error) {
                    console.log(error);
                }
            }
        },
        handleRemove(menu) {
            if (menu.resource_type_code === 'OPERATION') {
                let { permission_id } = menu;
                this.$confirm('此操作将永久删除该操作方式, 是否继续?', '确认删除', { type: 'warning' })
                    .then(async () => {
                        let { status, msg } = await this.remove_oper(permission_id);
                        if (status) {
                            // 信息提示
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
            } else {
                let { menu_id, permission_id } = menu;
                this.$confirm('此操作将永久删除该菜单, 是否继续?', '确认删除', { type: 'warning' })
                    .then(async () => {
                        let { status, msg } = await this.remove_menu([menu_id, { permission_id }]);
                        if (status) {
                            // 信息提示
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
            }

        },
        openIconDialog(icon) {
            this.current_menu = icon;
            this.loadIcon(30, 1);
            this.icon_dialog_visible = true;
        },
        handlePageChange() {
            this.loadIcon(30, this.index_page);
        },
        handleIcon(id,name,index) {
            if (this.iconID === id) {
                this.iconID = {};
            } else {
                this.iconID = {icon_id:id,icon_name:name};
            }
            this.current=index
        },
        async handleIconChange() {
            let { menu_id } = this.current_menu;
            try {
                let payload = [menu_id, this.iconID ];
                let { status, msg, data } = await this.edit_icons(payload);
                if (status) {
                    // 关闭弹窗
                    this.icon_dialog_visible = false;
                    // 信息提示
                    this.$message.success(msg);
                    this.iconID='';
                } else {
                    this.$message.error(msg);
                }
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

<style>
.icon_serot {
    width: 108%;
    display: flex;
    margin-bottom: 15px;
    flex-wrap: wrap;
    text-align: center;
}

.icon_border:hover {
    background-color: aquamarine;
    color: white;
}

.icon_border {
    width: 9%;
    height: 80px;
    border: 1px solid lightblue;
    border-collapse: collapse;
}

.icon {
    padding-top: 10px;
    font-size: 25px;
}

.icon_name {
    padding-top: 5px;
    color: gray;
    font-size: 5px;
}

.active {
    background-color: aquamarine;
    color: white;
}

.page {
    text-align: center;
}</style>